import { Modal } from 'antd';
import React, { forwardRef, useImperativeHandle, useState } from 'react';

export interface VideoPreviewModalProps {
  src?: string;
}

export interface VideoPreviewModalRef {
  show: (scr?: string) => void;
}

const VideoPreviewModal = (props: VideoPreviewModalProps, ref: React.Ref<VideoPreviewModalRef>) => {
  const [isOpen, setIsOpen] = useState(false);

  const [src, setSrc] = useState<string | undefined>(() => {
    return props.src || undefined;
  });

  useImperativeHandle(
    ref,
    () => ({
      show: (src?: string) => {
        setSrc(src);
        setIsOpen(true);
      },
    }),
    [],
  );

  return (
    <Modal
      styles={{
        content: {
          padding: 0,
          backgroundColor: '#000',
          alignItems: 'center',
          justifyContent: 'center',
          display: 'flex',
        },
      }}
      maskClosable={true}
      onCancel={() => setIsOpen(false)}
      style={{ padding: 0 }}
      closable={false}
      footer={false}
      open={isOpen}
      destroyOnClose
    >
      <video
        style={{ maxHeight: '80vh', maxWidth: '80vw', display: 'flex' }}
        height={'100%'}
        width={'100%'}
        src={src}
        controls
        autoPlay
      ></video>
    </Modal>
  );
};

export default forwardRef(VideoPreviewModal);
